<template>
  <div class="container">
    <Navbar title="手动打款支付"></Navbar>
    <div class="order-info">
      <div class="OrderID">
        订单号：
        <span>{{orderInfo.id}}</span>
      </div>
      <div class="price">
        需支付：
        <strong><span>￥</span>{{orderInfo.price}}</strong>
      </div>
    </div>
    <div class="pay-info">
      <div class="tit">收款信息<span>（手动打款需后台验证后交付订单，请耐心等待）</span></div>
      <div class="text" v-html="text"></div>
    </div>
    <van-button type="info" block style="margin: 40px 12px;" @click="$router.replace('/')">我已完成支付</van-button>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar';
import { getHandPay } from '@/network/order';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      orderInfo: {
        id: this.$route.query.orderId,
        price: this.$route.query.price,
      },
      text: '',
    };
  },
  created() {
    getHandPay().then((res) => {
      this.text = res.data.text;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f6f6f6;
  .order-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    padding: 16px;
    height: 104px;
    margin: 12px 0;
    font-weight: 700;
    span {
      font-weight: 400;
    }
    strong {
      color: #ff5858;
      font-size: 18px;
      span {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .pay-info {
    padding: 20px 16px;
    background-color: #fff;
    .tit {
      font-weight: 700;
      span {
        font-weight: 400;
        font-size: 12px;
      }
    }
    .text {
      width: 302px;
      margin-top: 12px;
    }
  }
}
</style>
